<template>
  <div class="home">
    <div class="headers">
      <!-- 搜索栏 -->
      <Header></Header>
      <!-- banner -->
      <ly-tabs v-model="selectedId" @change="changeTab" activeColor="#29a616">
        <ly-tab-item
          v-for="(item,name) in items"
          :key="name"
          :title="item.label"
          :name="item.value"
          
        />
      </ly-tabs>
    </div>
    
  <section ref="wrapper">
    <div>
          <div 
        v-for="(item,index) in newData"
        :key="index"
        >
        <!-- 轮播图 -->
      <SwiperComponent 
        v-if='item.type=="swiperList"'
        :swiperList="item.data"
      >
      </SwiperComponent>
      <!-- 图标 -->
      <Icons 
        v-if='item.type=="iconsList"'
        :iconsList="item.data"
        >
        </Icons>
      <!-- 推荐 -->
      <Recommend 
        v-if='item.type=="recommendList"'
        :recommendList="item.data"
        >
        </Recommend>
      <Ad 
        v-if='item.type=="adList"'
        :adList="item.data"
      >
      </Ad>
      <Like 
        v-if='item.type=="likeList"'
        :likeList="item.data"
      ></Like>
      </div>
    </div>
   
  </section>

<!-- 底部 -->
	<Tabbar></Tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
//引入组件
import   Header from "@/components/home/Header.vue";
import  Tabbar  from "@/components/common/Tabbar.vue";
import SwiperComponent from "@/components/home/SwiperComponent.vue";
import Icons from "@/components/home/Icons.vue";
import Recommend from "@/components/home/Recommend.vue";
import Like from "@/components/home/Like.vue";
import Ad from "@/components/home/Ad.vue";
//引入插件
import { LyTabs, LyTabBar, LyTabItem } from 'ly-tab';
import BetterScroll from 'better-scroll';
import http from '@/common/api/request.js';


export default {
  name: 'Home',
  data(){
    return{
      selectedId:0,
      items:[],
      newData:[],
      oBetterScroll:'',
      tBetterScroll:'',
      options:{
        activeColor:{
          default:'#76e4a9',
        },
      }
    }
  },
  components: {
  Tabbar,
  Header,
  LyTabs,
  LyTabBar,
  LyTabItem,
  SwiperComponent,
  Icons,
  Recommend,
  Like,
  Ad,

  },
  created() {
  	this.getData();
  },
  mounted() {
	  // console.log(this.$refs.wrapper)
  },
  methods:{
	  async getData(){
      // console.log(http.run());
      
		  let res = await http.$axios({
        url:'/api/index_list/0/data/1',
      })
		  
		  this.items = Object.freeze(res.topBar);
		  this.newData = Object.freeze(res.data);
		  // console.log(res.data.data.data);
  
      //当dom加载完毕之后再去执行
      this.$nextTick(()=>{
          this.oBetterScroll = new BetterScroll(this.$refs.wrapper,{
          movable:true,
          zoom:true,
          click:true,
          probeType:3,
          })
      })
      
	  },
   async  addData(item){
      let res = await http.$axios({
		  	url:'/api/index_list/'+item+'/data/1'
		  });
      if(res.constructor != Array){
        this.newData = res.data;
      }else{
        this.newData = res;
      }

       //当dom加载完毕之后再去执行
       this.$nextTick(()=>{
        this.tBetterScroll =  new BetterScroll(this.$refs.wrapper,{
          movable:true,
          zoom:true,
          click:true,
          probeType:3
          })
       })
    },
	  changeTab(item) {
      this.addData(item)
      // console.log(item)
    },
	  
  },
}
</script>

<style scoped>
.home{
  display: flex;
  /* 弹性竖直布局 */
  flex-direction: column;
/*  width: 100vw;
  height: 100vh; */
  /* 溢出隐藏 */
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
.headers{
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 5.625rem;
  z-index: 99;
}

section{
  flex: 1;
  overflow: hidden;
  margin-top: 5.625rem;
}

.ly-tab-item_label{
   
    color: rgb(14 88 20);
}
::v-deep .ly-tabs_active-line{
  
  background-color: rgb(14 88 20);
}

</style>
